<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <header class="top-navbar">
      <div class="navbar-content">
        <div class="logo-section">
          <el-icon class="logo-icon" size="28"><UserFilled /></el-icon>
          <span class="brand-name">暖星心理守护站</span>
        </div>
          <div class="user-section">
            <el-avatar :size="32" :src="userAvatar" @error="() => console.error('Home页面头像加载失败:', userAvatar)">
              <el-icon><UserFilled /></el-icon>
            </el-avatar>
          <span class="user-name">{{ doctorName || '医生' }}</span>
          <el-dropdown>
            <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToProfile">个人设置</el-dropdown-item>
                <el-dropdown-item @click="debugAvatarStatus">🔍 调试头像状态</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 左侧导航 -->
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <div class="nav-section">
            <h4 class="nav-title">工作台</h4>
            <ul class="nav-list">
              <li class="nav-item" :class="{ active: activeNavItem === 'schedule' }" @click="goToSchedule">
                <el-icon><Calendar /></el-icon>
                <span>今日安排</span>
              </li>
              <li class="nav-item" :class="{ active: activeNavItem === 'patients' }" @click="goToPatientManagement">
                <el-icon><User /></el-icon>
                <span>患者管理</span>
              </li>
              <li class="nav-item" :class="{ active: activeNavItem === 'records' }" @click="goToMedicalRecords">
                <el-icon><Document /></el-icon>
                <span>诊疗记录</span>
              </li>
            </ul>
          </div>
          
          <div class="nav-section">
            <h4 class="nav-title">系统功能</h4>
            <ul class="nav-list">
              <li class="nav-item" :class="{ active: activeNavItem === 'profile' }" @click="goToProfile">
                <el-icon><Setting /></el-icon>
                <span>个人设置</span>
              </li>
            </ul>
          </div>
        </nav>
      </aside>

      <!-- 右侧主要内容 -->
      <section class="content-area">
        <!-- 今日安排页面 -->
        <div v-if="activeNavItem === 'schedule'">
          <!-- 欢迎信息和统计卡片 -->
          <div class="welcome-banner">
            <div class="welcome-text">
              <h1 class="welcome-title">欢迎回来，{{ doctorName || '医生' }}</h1>
              <p class="welcome-subtitle">今天是 {{ currentDate }}，您有 {{ todayAppointments }} 个预约</p>
            </div>
            <div class="stats-cards">
              <div class="stat-card patients">
                <div class="stat-icon">
                  <el-icon><User /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ totalPatients }}</div>
                  <div class="stat-label">总患者数</div>
                </div>
              </div>
              <div class="stat-card appointments">
                <div class="stat-icon">
                  <el-icon><Calendar /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ todayAppointments }}</div>
                  <div class="stat-label">今日预约</div>
                </div>
              </div>
              <div class="stat-card records">
                <div class="stat-icon">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-number">{{ totalRecords }}</div>
                  <div class="stat-label">诊疗记录</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 快速操作和功能区域 -->
          <div class="dashboard-grid">
            <!-- 今日预约 -->
            <div class="dashboard-card schedule-card">
              <div class="card-header">
                <h3>今日预约</h3>
                <el-button type="primary" size="small" @click="goToSchedule">查看全部</el-button>
              </div>
              <div class="card-content">
                <div class="appointment-list">
                  <div v-for="appointment in upcomingAppointments" :key="appointment.id" class="appointment-item">
                    <div class="appointment-time">{{ appointment.time }}</div>
                    <div class="appointment-patient">{{ appointment.patient }}</div>
                    <div class="appointment-type">{{ appointment.type }}</div>
                  </div>
                  <div v-if="upcomingAppointments.length === 0" class="no-appointments">
                    <el-icon><Calendar /></el-icon>
                    <p>今天暂无预约</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 快速操作 -->
            <div class="dashboard-card actions-card">
              <div class="card-header">
                <h3>快速操作</h3>
              </div>
              <div class="card-content">
                <div class="quick-actions">
                  <div class="action-item" @click="goToPatientManagement">
                    <el-icon class="action-icon"><User /></el-icon>
                    <span>患者管理</span>
                  </div>
                  <div class="action-item" @click="goToMedicalRecords">
                    <el-icon class="action-icon"><Document /></el-icon>
                    <span>诊疗记录</span>
                  </div>
                  <div class="action-item" @click="goToProfile">
                    <el-icon class="action-icon"><Setting /></el-icon>
                    <span>个人设置</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 最近活动 -->
            <div class="dashboard-card activity-card">
              <div class="card-header">
                <h3>最近活动</h3>
              </div>
              <div class="card-content">
                <div class="activity-list">
                  <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                    <div class="activity-icon">
                      <el-icon><Document /></el-icon>
                    </div>
                    <div class="activity-details">
                      <div class="activity-title">{{ activity.title }}</div>
                      <div class="activity-time">{{ activity.time }}</div>
                    </div>
                  </div>
                  <div v-if="recentActivities.length === 0" class="no-activities">
                    <el-icon><Document /></el-icon>
                    <p>暂无最近活动</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 患者管理页面 -->
        <div v-else-if="activeNavItem === 'patients'" class="page-content">
          <div class="page-header">
            <h1>患者管理</h1>
            <p>管理您的患者信息，查看治疗进度和历史记录</p>
          </div>
          <div class="page-body">
            <div class="feature-card">
              <el-icon class="feature-icon"><User /></el-icon>
              <h3>患者管理功能开发中</h3>
              <p>该功能正在开发中，敬请期待...</p>
            </div>
          </div>
        </div>

        <!-- 诊疗记录页面 -->
        <div v-else-if="activeNavItem === 'records'" class="page-content">
          <div class="page-header">
            <h1>诊疗记录</h1>
            <p>查看和管理诊疗记录，跟踪治疗效果</p>
          </div>
          <div class="page-body">
            <div class="feature-card">
              <el-icon class="feature-icon"><Document /></el-icon>
              <h3>诊疗记录功能开发中</h3>
              <p>该功能正在开发中，敬请期待...</p>
            </div>
          </div>
        </div>


        <!-- 个人设置页面 -->
        <div v-else-if="activeNavItem === 'profile'" class="profile-content">
          <DoctorPersonalProfile />
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { DoctorPersonalProfile } from '../api/profile.js'
import { getDoctorProfile } from '../api/doctor.js'

import { 
  UserFilled, 
  User,
  Document,
  Setting,
  Calendar, 
  ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const doctorName = ref('')
const userAvatar = ref('')
const currentDate = ref('')
const totalPatients = ref(128)
const todayAppointments = ref(5)
const totalRecords = ref(342)

// 当前选中的导航项
const activeNavItem = ref('schedule')

// 模拟预约数据
const upcomingAppointments = ref([
  { id: 1, time: '09:00', patient: '张小明', type: '心理咨询' },
  { id: 2, time: '10:30', patient: '李女士', type: '复诊' },
  { id: 3, time: '14:00', patient: '王先生', type: '初诊' },
  { id: 4, time: '15:30', patient: '陈同学', type: '青少年咨询' },
  { id: 5, time: '16:30', patient: '刘阿姨', type: '家庭治疗' }
])

// 模拟活动数据
const recentActivities = ref([
  { id: 1, title: '完成张小明的诊疗记录', time: '2小时前' },
  { id: 2, title: '更新李女士的治疗方案', time: '3小时前' },
  { id: 3, title: '添加新患者王先生', time: '1天前' },
  { id: 4, title: '完成本周工作总结', time: '2天前' }
])

// 头像更新事件处理
const handleAvatarUpdate = (event) => {
  console.log('收到头像更新事件:', event.detail)
  userAvatar.value = event.detail.avatarUrl
}

// 组件挂载时初始化数据
onMounted(() => {
  console.log('🚀 [Home] 组件挂载开始')
  console.log('🚀 [Home] 初始userAvatar值:', userAvatar.value)
  console.log('🚀 [Home] localStorage中的doctorInfo:', localStorage.getItem('doctorInfo'))
  
  initializeData()
  updateCurrentDate()
  
  // 监听头像更新事件
  window.addEventListener('avatarUpdated', handleAvatarUpdate)
})

// 组件卸载时清理事件监听器
onBeforeUnmount(() => {
  window.removeEventListener('avatarUpdated', handleAvatarUpdate)
})

// 初始化数据
const initializeData = async () => {
  try {
    // 从localStorage获取当前登录医生ID
    const doctorId = localStorage.getItem('doctorId') || localStorage.getItem('userId') || '1'
    
    console.log('🔍 [Home] 正在加载医生信息，ID:', doctorId)
    console.log('🔍 [Home] 当前userAvatar值:', userAvatar.value)
    
    // 调用后端API获取医生信息
    const response = await getDoctorProfile(doctorId)
    console.log('🔍 [Home] API响应:', response)
    
    if (response && response.data) {
      const data = response.data
      console.log('医生信息加载成功:', data)
      console.log('可用的字段名:', Object.keys(data))
      
      // 更新医生信息
      doctorName.value = data.name || data.doctorName || data.doctor_name || '张真'
      const avatarFromApi = data.path || data.avatarUrl || data.avatar || ''
      userAvatar.value = avatarFromApi
      
      console.log('🎯 [Home] Doctor name initialized:', doctorName.value)
      console.log('🎯 [Home] 从API获取的头像:', avatarFromApi)
      console.log('🎯 [Home] User avatar initialized:', userAvatar.value)
      console.log('🎯 [Home] 头像字段详细检查:')
      console.log('  - data.path:', data.path)
      console.log('  - data.avatarUrl:', data.avatarUrl) 
      console.log('  - data.avatar:', data.avatar)
      
      // 保存到localStorage供其他地方使用
      const doctorInfo = {
        doctorName: doctorName.value,
        avatarUrl: userAvatar.value,
        // 可以保存其他需要的信息
        phone: data.phone || data.phoneNumber || '',
        email: data.email || data.emailAddress || '',
        department: data.department || ''
      }
      localStorage.setItem('doctorInfo', JSON.stringify(doctorInfo))
      console.log('已保存医生信息到localStorage:', doctorInfo)
      
    } else {
      console.log('未获取到医生信息，使用默认值')
      // 从localStorage获取备用信息
      const doctorInfo = localStorage.getItem('doctorInfo')
      console.log('🔄 [Home] API无响应，尝试从localStorage恢复')
      console.log('🔄 [Home] localStorage数据:', doctorInfo)
      if (doctorInfo) {
        const info = JSON.parse(doctorInfo)
        console.log('🔄 [Home] 解析的localStorage数据:', info)
        doctorName.value = info.doctorName || '医生'
        userAvatar.value = info.avatarUrl || ''
        console.log('🔄 [Home] 从localStorage恢复头像:', userAvatar.value)
        console.log('🔄 [Home] 从localStorage恢复姓名:', doctorName.value)
      } else {
        // 设置默认值
        doctorName.value = '张真'
        userAvatar.value = ''
        console.log('❌ [Home] localStorage中无医生信息，使用默认值')
      }
    }
  } catch (error) {
    console.error('🚨 [Home] 加载医生信息失败:', error)
    
    // 从localStorage获取备用信息
    const doctorInfo = localStorage.getItem('doctorInfo')
    console.log('🚨 [Home] API失败，尝试从localStorage恢复')
    console.log('🚨 [Home] localStorage数据:', doctorInfo)
    if (doctorInfo) {
      const info = JSON.parse(doctorInfo)
      console.log('🚨 [Home] 解析的localStorage数据:', info)
      doctorName.value = info.doctorName || '医生'
      userAvatar.value = info.avatarUrl || ''
      console.log('🚨 [Home] API失败，从localStorage恢复头像:', userAvatar.value)
      console.log('🚨 [Home] API失败，从localStorage恢复姓名:', doctorName.value)
    } else {
      // 设置默认值
      doctorName.value = '张真'
      userAvatar.value = ''
      console.log('🚨 [Home] API失败且localStorage中无数据，使用默认值')
    }
  }
}

// 更新当前日期
const updateCurrentDate = () => {
  const now = new Date()
  const options = { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric',
    weekday: 'long'
  }
  currentDate.value = now.toLocaleDateString('zh-CN', options)
}

// 设置活跃导航项
const setActiveNav = (navItem) => {
  activeNavItem.value = navItem
  console.log('Active nav changed to:', navItem)
}

// 导航方法
const goToPatientManagement = () => {
  setActiveNav('patients')
}

const goToMedicalRecords = () => {
  setActiveNav('records')
}


const goToProfile = () => {
  setActiveNav('profile')
}

const goToSchedule = () => {
  setActiveNav('schedule')
}

// 退出登录
const logout = () => {
  localStorage.removeItem('doctorInfo')
  localStorage.removeItem('token')
  ElMessage.success('已退出登录')
  router.push('/doctor/login')
}

// 调试头像状态
const debugAvatarStatus = async () => {
  console.log('🔧 ===== 头像调试信息开始 =====')
  
  // 1. 检查当前前端状态
  console.log('📱 前端状态:')
  console.log('  - userAvatar.value:', userAvatar.value)
  console.log('  - doctorName.value:', doctorName.value)
  
  // 2. 检查localStorage
  console.log('💾 localStorage状态:')
  const localData = localStorage.getItem('doctorInfo')
  console.log('  - 原始数据:', localData)
  if (localData) {
    try {
      const parsed = JSON.parse(localData)
      console.log('  - 解析后数据:', parsed)
      console.log('  - avatarUrl:', parsed.avatarUrl)
    } catch (e) {
      console.log('  - 解析失败:', e)
    }
  }
  
  // 3. 检查API数据
  console.log('🌐 API状态:')
  try {
    const doctorId = localStorage.getItem('doctorId') || localStorage.getItem('userId') || '1'
    console.log('  - 使用的doctorId:', doctorId)
    
    const response = await getDoctorProfile(doctorId)
    console.log('  - API响应:', response)
    
    if (response && response.data) {
      const data = response.data
      console.log('  - 响应数据:', data)
      console.log('  - 头像相关字段:')
      console.log('    * path:', data.path)
      console.log('    * avatarUrl:', data.avatarUrl)
      console.log('    * avatar:', data.avatar)
    }
  } catch (error) {
    console.log('  - API调用失败:', error)
  }
  
  // 4. 测试图片URL是否可访问
  if (userAvatar.value) {
    console.log('🌍 URL可访问性测试:')
    console.log('  - 测试URL:', userAvatar.value)
    
    try {
      const response = await fetch(userAvatar.value, { method: 'HEAD' })
      console.log('  - HTTP状态码:', response.status)
      console.log('  - 是否可访问:', response.ok)
    } catch (error) {
      console.log('  - 访问失败:', error)
    }
  }
  
  console.log('🔧 ===== 头像调试信息结束 =====')
  
  ElMessage.info('头像调试信息已输出到控制台，请查看浏览器开发者工具')
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  height: 100vh;
  background: linear-gradient(135deg, #ffab91 0%, #ff8a65 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* 顶部导航栏 */
.top-navbar {
  background: linear-gradient(135deg, #ffab91 0%, #ff8a65 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0 32px;
  height: 70px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(255, 171, 145, 0.4);
}

.navbar-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  color: #ecf0f1;
}

.brand-name {
  font-size: 22px;
  font-weight: 700;
  color: #ecf0f1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.user-section {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 25px;
  transition: all 0.3s;
}

.user-section:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-name {
  font-size: 15px;
  color: #ecf0f1;
  font-weight: 500;
}

.dropdown-icon {
  color: #bdc3c7;
  transition: transform 0.3s;
}

.user-section:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* 主要内容区域 */
.main-content {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* 左侧边栏 */
.sidebar {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  background: linear-gradient(135deg, #ffab91 0%, #ff8a65 100%);
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  padding: 24px 0;
  height: 100%;
  overflow-y: auto;
  box-shadow: 2px 0 15px rgba(255, 138, 101, 0.3);
  flex-shrink: 0;
}

.sidebar-nav .nav-section {
  margin-bottom: 32px;
  padding: 0 16px;
}

.nav-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px 0;
  padding: 0 16px;
  font-weight: 700;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.nav-item span {
  font-size: 14px;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
  min-width: 0;
  padding: 32px;
  background: rgba(255, 255, 255, 0.05);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  border-radius: 0 0 0 24px;
}

/* 页面内容样式 */
.page-content {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(255, 138, 101, 0.15);
  backdrop-filter: blur(10px);
}

.page-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(255, 171, 145, 0.2);
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #ff8a65;
  margin: 0 0 8px 0;
}

.page-header p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature-card {
  text-align: center;
  padding: 48px 32px;
  background: linear-gradient(135deg, #fff8f0 0%, #ffe8d6 100%);
  border-radius: 16px;
  border: 2px solid rgba(255, 171, 145, 0.2);
}

.feature-icon {
  font-size: 48px;
  color: #ff8a65;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #ff8a65;
  margin: 0 0 12px 0;
}

.feature-card p {
  font-size: 14px;
  color: #999;
  margin: 0;
}

/* 欢迎横幅 */
.welcome-banner {
  background: linear-gradient(135deg, #ffab91 0%, #ff8a65 100%);
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 32px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 6px 24px rgba(255, 171, 145, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.4);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.welcome-text h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.welcome-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.stats-cards {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.stat-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  min-width: 120px;
  text-align: center;
}

.stat-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
}

/* 仪表板网格 */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dashboard-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(255, 138, 101, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  min-height: 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}

.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(255, 138, 101, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f5f7fa;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.card-content {
  color: #606266;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 预约列表 */
.appointment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.appointment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f9fafc;
  border-radius: 8px;
  font-size: 14px;
}

.appointment-time {
  font-weight: 600;
  color: #409eff;
  min-width: 60px;
}

.appointment-patient {
  flex: 1;
  margin: 0 12px;
}

.appointment-type {
  color: #909399;
  font-size: 12px;
}

.no-appointments, .no-activities {
  text-align: center;
  padding: 32px;
  color: #c0c4cc;
}

.no-appointments p, .no-activities p {
  margin: 8px 0 0 0;
  font-size: 14px;
}

/* 快速操作 */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  flex: 1;
  min-height: 120px;
  box-shadow: 0 3px 12px rgba(255, 138, 101, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.action-item:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 138, 101, 0.3);
}

.action-icon {
  font-size: 28px;
  color: #ffab91;
}

.action-item span {
  font-size: 12px;
  color: #606266;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.6);
}

.activity-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 171, 145, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffab91;
  font-size: 16px;
  flex-shrink: 0;
}

.activity-details {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

/* 页面内容样式 */
.page-content {
  padding: 0;
}

.profile-content {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 0 0 24px;
}

.page-header {
  background: linear-gradient(135deg, #ffab91 0%, #ff8a65 100%);
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 32px;
  color: white;
  text-align: center;
  box-shadow: 0 6px 24px rgba(255, 171, 145, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.4);
  position: relative;
  z-index: 10;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.page-header p {
  font-size: 18px;
  margin: 0;
  opacity: 0.95;
}

.page-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(255, 171, 145, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  max-width: 500px;
  width: 100%;
  position: relative;
  z-index: 5;
}

.feature-icon {
  font-size: 64px;
  color: #ffab91;
  margin-bottom: 24px;
}

.feature-card h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.feature-card p {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* 缩放稳定性 */
* {
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

/* 确保flex容器在缩放时稳定 */
.home-page,
.main-content,
.content-area,
.dashboard-grid,
.welcome-banner {
  contain: layout style;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .stats-cards {
    flex-direction: column;
    gap: 8px;
  }
  
  .welcome-banner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 220px;
  }
  
  .content-area {
    padding: 20px;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .dashboard-card {
    min-height: 300px;
  }
  
  .welcome-banner {
    padding: 28px;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-page {
    height: 100vh;
  }
  
  .main-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    padding: 16px 0;
    flex-shrink: 0;
  }
  
  .content-area {
    padding: 16px;
    flex: 1;
  }
  
  .navbar-content {
    padding: 0 16px;
  }
  
  .brand-name {
    font-size: 18px;
  }
  
  .user-name {
    display: none;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dashboard-card {
    min-height: 250px;
  }
  
  .welcome-banner {
    padding: 24px;
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}
</style>
